import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/Layout.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home',// 重新跳转 '/home'
  },
  // 一级路由  router-view
  {
    path: '/',
    component: Layout,
    // 二级路由  router-view
    // 子路由路径的配置不需要 '/' 斜线
    children: [
      {
        path: 'home',
        name: 'Home',
        component: () => import('@/pages/home/home.vue'),
        // 三级路由  router-view
        children: [
          {
            path: 'list',
            component: () => import('@/pages/list/list.vue'),
          }
        ]
      },
      {
        path: 'search',
        name: 'Search',
        component: () => import('@/pages/search/search.vue')
      },
      {
        path: 'collection',
        name: 'Collection',
        component: () => import('@/pages/collection/collection.vue')
      },
      {
        path: 'my',
        name: 'My',
        component: () => import('@/pages/my/my.vue')
      },
    ]
  },
  // 若不存在这个路径，那么就跳转404页面
  {
    path: '*',
    name: '404',
    component: () => import('@/pages/error.vue')
  },
  // 登录页路由
  {
    path: '/login',
    name: 'login',
    component: ()=> import('@/pages/login/login.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: ()=> import('@/pages/login/register.vue')
  },
  {
    path: '/findpwd',
    name: 'findpwd',
    component: ()=> import('@/pages/login/findpwd.vue')
  },
  // 测试组件
  {
    path: '/test',
    name: 'test',
    component: ()=> import('@/pages/test/test.vue')
  },
  // 测试组件
  {
    path: '/lyric',
    name: 'lyric',
    component: ()=> import('@/pages/lyric/lyric.vue')
  }
]

// 步骤:
// 1. 定义组件
// 2. 配置路由
// 3. 通过url访问组件
// 4. 组件在router-view出口渲染

const router = new VueRouter({
  routes
})

export default router
